<template>
  <div class="">
    <!-- 最简单的方式 -->
      <!-- <el-switch v-model="tableData[0].value" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
      <el-switch v-model="tableData[1].value" ></el-switch>
      <el-switch v-model="tableData[2].value" active-color="#13ce66" inactive-color="#ff4949"></el-switch> -->
      <el-switch
        v-for="(item,index) in tableData"
        :key="item.id"
        v-model="item.value"
        :active-value="true"
        :inactive-value="false"
        @change="handleChange"
      ></el-switch>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  components: {},
  data() {
    return {
      tableData:[
        {
          id:1,
          title:"首页",
          value:true,
        },
        {
          id:2,
          title:"产品",
          value:false,
        },
         {
          id:3,
          title:"公司介绍",
          value:false,
        },
      ]
      // value1: true,
      // value2: false,
      // value3: true,
    };
  },
  methods: {
    handleChange:function(value){
        console.log(value);
    }
  },
};
</script>
<style>
</style>
